<template>
  <div class="body">
    <div class="body-nav">
      <div class="block" style="display:inline-block">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>

        <el-checkbox v-model="checked1" label="第一车牌号" border></el-checkbox>
        <el-checkbox v-model="checked2" label="第二车牌号" border></el-checkbox>
        <el-checkbox v-model="checked3" label="第三车牌号" border></el-checkbox>

        <el-checkbox v-model="checked4" label="月卡查询" border></el-checkbox>
        <el-checkbox v-model="checked5" label="次卡查询" border></el-checkbox>
    </div>

    <div class="body-table">
      <el-table
        :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        stripe
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="userAccount"
          label="通行证"
          width="180">
        </el-table-column>
        <el-table-column
          prop="billType"
          label="账单类型">
        </el-table-column>
        <el-table-column
          prop="billAmount"
          label="账单总额">
        </el-table-column>
        <el-table-column
          prop="userBalance"
          label="余额">
        </el-table-column>
        <el-table-column
          prop="isPlate"
          label="是否为车牌消费">
        </el-table-column>
        <el-table-column
          prop="plateNumber"
          label="消费车牌号码">
        </el-table-column>
      </el-table>

      <el-pagination layout="prev, pager, next" :total="tableData.length" :page-size="pagesize"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
      style="position: absolute;top: 700px;left: 700px;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],

        checked1: true,
        checked2: true,
        checked3: true,
        checked4: true,
        checked5: true,

        value1:'',

        currentPage: 1, //初始页和当前页码数
        pagesize: 10, //每页的数据上限

    }
  },
  
  methods: {
      async query(){
        const res = await this.$http.post('user/queryByDefault',{
          userAccount : window.sessionStorage.getItem('userAccount')
        }) 

        this.tableData = res.data
        console.log(res.data);
      },

      handleCurrentChange(val) {
        this.currentPage = val;
      }
  },

  created:async function() {
    const res = await this.$http.post('user/queryByDefault',{
          userAccount : window.sessionStorage.getItem('userAccount')
        }) 

    let temp = res.data 
    let i = 0
    temp.forEach(function(e){  
      temp[i].date = temp[i].billYear +'-'+ temp[i].billMouth +'-' +temp[i].billDay

      switch(temp[i].billType){
        case 'bigWallet_recharge' :
          temp[i].billType = '账户充值'
          break
        case 'bigWallet_refund' :
          temp[i].billType = '账户消费'
          break
        case 'smallWallet_recharge' :
          temp[i].billType = '车牌充值'
          break
        case 'smallWallet_refund' :
          temp[i].billType = '车牌消费'
          break
      }

      if(temp[i].userPlateNumber != -1){
        temp[i].isPlate = 'Y'
        temp[i].plateNumber = temp[i].userPlateNumber
      }else{
        temp[i].isPlate = 'N'
        temp[i].plateNumber = 'null'
      }

      i++  
    });
    this.tableData = temp
  },
}
</script>

<style>
  .body{
    width: 90%;
    height: 90%;

    margin-left: 50px;
    margin-top: 50px;

    background-color: white;

    opacity: 0.8;
  }

  .body-nav{
    margin-left: 50px;
    padding-top: 40px;
    margin-bottom: 40px;
  }

  .body-nav>*{
    margin-left: 80px;
  }
</style>